<template>
    <div class="goodsListOut">
        <!-- 面包屑 -->
        <el-card>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/welcom' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>列表管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card>
        <!--内容区域 -->
        <el-card>
            <!-- 提示信息区域 -->
            <el-alert title="注意：默认多条件查询，单条件查询需要刷新后点击条件选项~" type="warning">
            </el-alert>
            <!-- 搜索和添加区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" class="input-with-select" v-model="selectGoods.searchKey" clearable
                        @clear="getData()">
                        <el-button slot="append" icon="el-icon-search" @click="getData()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-cascader placeholder="分类选择" clearable expand-trigger="hover" :options="parentCateList"
                        v-model="selectedKeys" :props="cascaderProps" @change="parentCateChange">
                    </el-cascader>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="selectGoods.state" placeholder="状态选择" @change="selectedChange">
                        <el-option v-for="item in selectOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="goPageAdd">添加商品</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="success" @click="reset">刷新</el-button>
                </el-col>
            </el-row>
            <!-- 数据区域 -->
            <el-table :data="goodsList" style="width: 100%" :border="true" :stripe="true">
                <el-table-column type="index" label="序号" align='center'></el-table-column>
                <el-table-column prop="name" label="商品名称" align='center'></el-table-column>
                <el-table-column prop="goodsDec" label="商品描述" align='center'></el-table-column>
                <el-table-column label="图片" align='center'>
                    <template slot-scope="scope">
                        <img :src="scope.row.imgUrl" style="width: 100px; height: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="pprice" label="价格" align='center'></el-table-column>
                <el-table-column prop="className" label="所属类别" align='center'></el-table-column>
                <el-table-column prop="saleNum" label="销售数量" align='center'></el-table-column>
                <el-table-column prop="kucun" label="库存" align='center'></el-table-column>
                <el-table-column label="状态" align='center'>
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#f1f1f1"
                            :active-value="0" :inactive-value="1" @change="goodsStateChanged(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="addTime" label="注册时间" align='center' :formatter="dateFormat"></el-table-column>
                <el-table-column label="操作" align='center'>
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"
                            @click="editGoods(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini"
                            @click="delGoods(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="selectGoods.currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="selectGoods.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>



<script>
import { selectByAdmin, updateGoodsAll, delGoodsById } from '@/api/goods/goods'
import { getClassAll } from '@/api/goodsClass/goodsClass'
export default {
    data() {
        return {
            //数据数量
            total: null,
            goodsList: [],
            //查询参数集合
            selectGoods: {
                //查询参数
                searchKey: '',
                //状态参数 0表示获取正常状态的商品，1 反之
                state: '',
                //所属类别参数
                goodsId: '',
                //第几页
                currentPage: 1,
                //一页显示几条数据，默认5条
                pageSize: 5,
            },
            //选中的父级分类的ID数组
            selectedKeys: [],
            //分类的列表
            parentCateList: [],
            //指定级联选择器的配置对象
            cascaderProps: {
                value: 'id',
                label: 'name',
                children: 'children'
            },
            //状态值
            selectOptions: [
                {
                    value: '',
                    label: '全部'
                }, {
                    value: '0',
                    label: '未下架'
                }, {
                    value: '1',
                    label: '已下架'
                },
            ]
        }
    },
    created() {
        //获取表格数据
        this.getData()

        //获级分类信息
        this.getGoodsClass()
    },
    methods: {
        //删除
        delGoods(row) {
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await delGoodsById(row.id).then(res => {
                    if (res.data.status == 0) {
                        this.goodsList = this.goodsList.filter(item => item.id != row.id)
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }
                })

            }).catch(() => { })
        },
        //状态发生改变
        goodsStateChanged(row) {
            updateGoodsAll({ state: row.state, id: row.id }).then(res => {
                if (res.data.status == 0) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }
            })
        },
        //编辑商品
        editGoods(row) {
            const { name, imgUrl, kucun, pprice, goodsId, id, goodsDec } = row
            this.$router.push(`/goods/add?goodsDtail=${JSON.stringify({ name, imgUrl, kucun, pprice, goodsId, id, goodsDec })}`)
        },
        //添加商品
        goPageAdd() {
            this.$router.push('/goods/add')
        },
        //刷新
        reset() {
            location.reload()
        },
        //状态选择器值发生改变
        selectedChange() {
            this.getData()
        },
        //获取分类信息
        async getGoodsClass() {
            await getClassAll().then(res => {
                if (res.data.status == 0) {
                    this.parentCateList = res.data.data
                }
            })
        },
        //分类选择器发生改变触发
        parentCateChange() {
            if (this.selectedKeys.length > 0) {
                this.selectGoods.goodsId = this.selectedKeys[this.selectedKeys.length - 1]
            } else {
                this.selectGoods.goodsId = ''
            }
            this.getData()
        },

        //改变页面的显示数据数量
        handleSizeChange(newSize) {
            this.selectGoods.pageSize = newSize
            this.getData()
        },
        handleCurrentChange(newPage) {
            this.selectGoods.currentPage = newPage
            this.getData()
        },
        //获取数据
        async getData() {
            await selectByAdmin(this.selectGoods).then(res => {
                if (res.data.status == 0) {
                    this.goodsList = res.data.data
                    this.total = res.data.totalpage
                }
            })
        },
        // 编写日期格式化方法
        dateFormat: function (row) {
            const date = row.addTime
            if (!date) {
                return ''
            }
            // 这里的格式根据需求修改
            return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
        },
    }
}
</script>

<style scoped lang="less">
.el-alert {
    margin-bottom: 20px;
}

.el-cascader {
    width: 100%;
}
</style>